<template>
  <div>
    <van-nav-bar title="发表评价" left-arrow @click-left="$router.go(-1)" @click-right="handleSubmit()">
      <p slot="right" class="text-red">发布</p>
    </van-nav-bar>
    <div class="m-t-5">
      <div class="flex j-between a-center p-10">
        <img class="w-30 h-30 fs-rem-12px text-grey" :src="$route.query.pic" alt="logo" />
        <p class="flex flex-1 m-l-10 fs-rem-14px text-content">
          <span>评价商家</span>
          <van-rate color="#fd4f51" class="m-l-10" v-model="rateValue" />
          <span class="m-l-10">{{rateValue}}分</span>
        </p>
      </div>
      <van-field
        class="m-t-10"
        v-model="message"
        type="textarea"
        placeholder="写几句评价, 10个字以上有助其他顾客参考～"
        rows="4"
        autosize
      />
      <p class="text-right m-t-10 p-r-15 text-grey fs-rem-12px">{{message.length}} / 200</p>
      <div class="p-20">
        <van-uploader
          v-model="uploadImgs"
          multiple
          upload-text="添加图片"
          :max-size="uploadImgsMaxSize"
          @oversize="handleOversize"
          :max-count="1"
        />
      </div>
    </div>
  </div>
</template>

<script>
import logo from '@/assets/images/merchant.jpg'

export default {
  data () {
    return {
      message: '',
      rateValue: 5,
      uploadImgs: [],
      uploadImgsMaxSize: 2000000,
      logo
    }
  },
  methods: {
    async handleSubmit () {
      if (this.message) {
        let { status, message } = await this.$api.post('/pj/add', {
          ddh: this.$route.params.id,
          star: +this.rateValue,
          pj: this.message,
          picture: ''
        })
        if (status === 0) {
          this.$toast.success({
            message,
            duration: 1000
          })
          setTimeout(() => {
            this.$router.push('/user/order')
          }, 500)
        }
      } else {
        this.$toast('请完善内容')
      }
    },
    handleOversize (file, name) {
      this.$toast({
        message: `大小超过${this.uploadImgsMaxSize / 1000000}M`,
        type: 'fail'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
